<template>
  <div class="news-detail-container">
    <!-- 返回按钮 -->
    <el-button
        type="primary"
        icon="ArrowLeft"
        class="back-btn"
        @click="$router.go(-1)"
    >
      返回列表
    </el-button>

    <!-- 主体内容 -->
    <div class="detail-card">
      <!-- 标题区 -->
      <div class="header">
        <h1 class="title">{{ newsDetail.title }}</h1>
        <div class="meta">
          <dict-tag  :options="news_type" :value="newsDetail.type"/>
          <span class="publish-time">{{ newsDetail.createTime }}</span>
        </div>
      </div>

      <!-- 内容区 -->
      <div class="content">
        <!-- 封面图 -->
        <img
            v-if="newsDetail.coverImage"
            :src="newsDetail.coverImage"
            class="cover-image"
            alt="封面图"
        >

        <!-- 正文内容 -->
        <div class="article-content" v-html="newsDetail.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import {getNews} from "@/api/news/news.js";
import DictTag from "@/components/DictTag/index.vue";

const {proxy} = getCurrentInstance()
const {news_type} = proxy.useDict("news_type")
const newsId = ref(0);
const newsDetail = ref({})

onMounted(() => {
  newsId.value = proxy.$route.query.newsId
  getNews(newsId.value).then(res => {
    newsDetail.value = res.data
  })
})

</script>

<style scoped lang="scss">
.news-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;

  .back-btn {
    margin-bottom: 30px;
    transition: all 0.3s;

    &:hover {
      transform: translateX(-5px);
    }
  }

  .detail-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05);
    padding: 40px;
  }

  .header {
    border-bottom: 1px solid #eee;
    padding-bottom: 25px;
    margin-bottom: 30px;

    .title {
      font-size: 32px;
      color: #2c3e50;
      margin: 0 0 20px;
      line-height: 1.3;
    }

    .meta {
      display: flex;
      align-items: center;
      gap: 15px;

      .publish-time {
        color: #666;
        font-size: 14px;
      }
    }
  }

  .content {
    .cover-image {
      width: 100%;
      max-height: 500px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 30px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .article-content {
      font-size: 16px;
      line-height: 1.8;
      color: #444;

      :deep(p) {
        margin: 1.5em 0;
      }

      :deep(img) {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
        margin: 20px 0;
      }
    }
  }
}

@media (max-width: 768px) {
  .news-detail-container {
    padding: 20px 15px;

    .detail-card {
      padding: 25px;
    }

    .header .title {
      font-size: 24px;
    }
  }
}
</style>
